<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/libs/css/bootstrap.min.css">
</head>
<style>
    table tr {
        text-align: center;
    }
</style>

<body>
    <input class="form-control" style="width:200px;display:inline;" placeholder="请输入搜索的预约者姓名" id="keyword">
    <button class="btn btn-primary" onclick="search()">搜索</button>
    <table class="table table-hover ">
        <thead>
            <tr class="table-active">
                <th>预约信息编号</th>
                <th>预约婚纱</th>
                <th>预约者</th>
                <th>预约时间</th>
                <th>预约电话</th>
                <th>预约地点</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbodyContent">
            @foreach($data as $appoinment)
            @csrf
            <tr>
                <td>{{ $appoinment->appointmentid }}</td>
                <td>{{ $appoinment->dressname }}</td>
                <td>{{ $appoinment->username }}</td>
                <td>{{ $appoinment->appointmenttime }}</td>
                <td>{{ $appoinment->tel }}</td>
                <td>{{ $appoinment->address }}</td>
                <td><button onclick="update('{{$appoinment->appointmentid}}')" class="btn btn-warning">修改</button><button class="btn btn-danger" onclick="remove('{{$appoinment->appointmentid}}')" style="margin-left:5px;">删除</button></td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal-title"></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="form-info">
                        @csrf
                        <div class="mb-3">
                            <input type="hidden" class="form-control" id="appointmentid" placeholder="预定编号" name="appointmentid">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="dressname" placeholder="预约婚纱" name="dressname">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="username" placeholder="预约者" name="username">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="appointmenttime" placeholder="预约时间" name="appointmenttime">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="tel" placeholder="预约电话" name="tel">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="address" placeholder="预约地点" name="address">
                        </div>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="/libs/jquery-3.6.0.js"></script>
    <script src="/libs/js/bootstrap.js"></script>
    <script>

        function update(appointmentid) {
            $('#myModal').modal('show');
            $('#modal-title').text('修改预约信息');
            $.ajax({
                type: 'post',
                url: '/appoinment/update',
                data: {
                    'appointmentid': appointmentid,
                    '_token': $('input[name=_token]').val()
                },
                dataType: 'json',
                success: function(res) {
                    $('#appointmenttime').val(res[0].appointmenttime);
                    $('#dressname').val(res[0].dressname);
                    $('#appointmentid').val(res[0].appointmentid);
                    $('#username').val(res[0].username);
                    $('#tel').val(res[0].tel);
                    $('#address').val(res[0].address);
                }
            })
        }

        function save() {
            let data = {
                'appointmenttime': $('#appointmenttime').val(),
                'dressname': $('#dressname').val(),
                'appointmentid': $('#appointmentid').val(),
                'username': $('#username').val(),
                'address': $('#address').val(),
                'tel': $('#tel').val(),
                '_token': $('input[name=_token]').val()
            }
            $.ajax({
                type: 'post',
                url: '/appoinment/save',
                data: data,
                dataType: 'json',
                success: function(res) {
                    console.log(res);
                    if (res[0].code == 200) {
                        location.reload();
                    } else {
                        alert('修改失败');
                    }
                }
            })
        }

        function remove(appointmentid) {
            $.ajax({
                type: 'post',
                url: '/appoinment/remove',
                data: {
                    'appointmentid': appointmentid,
                    '_token': $('input[name=_token]').val()
                },
                dataType: 'json',
                success: function(res) {
                    if (res[0].code == 200) {
                        location.reload();
                    } else {
                        alert('删除失败');
                    }
                }
            })
        }

        function submit() {
            $('#myModal').modal('show');
            $('#modal-title').text('添加婚纱信息');
            $('#save').hide()
            $('#add').show()
            $('#dressimage').show()
            $('#dressname').val(''),
                $('#appointmentid').val(''),
                $('#username ').val(''),
                $('#dressprice').val('')
        }

        function search() {
            let keyword = $('#keyword').val();
            $.ajax({
                type: 'post',
                url: '/appoinment/search',
                data: {
                    'keyword': keyword,
                    '_token': $('input[name=_token]').val()
                },
                success: function(res) {
                    $('#tbodyContent').html('')
                    res.forEach(item => {
                        $('#tbodyContent').append(`
                            <tr>
                                <td>${item.appointmentid}</td>
                                <td>${item.dressname}</td>
                                <td>${item.username}</td>
                                <td>${item.appointmenttime}</td>
                                <td>${item.tel}</td>
                                <td>${item.address}</td>
                                <td><button onclick="update(${item.appointmentid})" class="btn btn-warning">修改</button>
                                <button class="btn btn-danger" onclick="remove(${item.appointmentid})" style="margin-left:5px;">删除</button></td>
                            </tr>
                        `)
                    });
                }
            })
        }
    </script>
</body>

</html>